// 智能办公主题组件样式

// 智能办公卡片样式
.office-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(24, 144, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(24, 144, 255, 0.15);
  }
  
  .el-card__header {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.02) 0%, rgba(24, 144, 255, 0.05) 100%);
    border-bottom: 1px solid rgba(24, 144, 255, 0.1);
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
    
    .card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .header-title {
        font-size: 18px;
        font-weight: 600;
        color: #262626;
        
        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 18px;
          background: linear-gradient(180deg, #1890ff 0%, #52c41a 100%);
          border-radius: 2px;
          margin-right: 12px;
          vertical-align: middle;
        }
      }
    }
  }
  
  .el-card__body {
    padding: 24px;
  }
}

// 智能办公按钮样式
.office-button {
  &.el-button--primary {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(24, 144, 255, 0.3);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  &.el-button--success {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(82, 196, 26, 0.3);
    }
  }
  
  &.el-button--warning {
    background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(250, 140, 22, 0.3);
    }
  }
}

// 智能办公表格样式
.office-table {
  .el-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    
    .el-table__header {
      background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
      
      th {
        background: transparent;
        color: #262626;
        font-weight: 600;
        border-bottom: 2px solid rgba(24, 144, 255, 0.1);
      }
    }
    
    .el-table__body {
      tr {
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(24, 144, 255, 0.02);
          transform: scale(1.01);
        }
        
        td {
          border-bottom: 1px solid rgba(24, 144, 255, 0.05);
        }
      }
    }
  }
}

// 智能办公表单样式
.office-form {
  .el-form-item {
    .el-form-item__label {
      color: #262626;
      font-weight: 500;
    }
    
    .el-input__inner {
      border-radius: 8px;
      border: 1px solid rgba(24, 144, 255, 0.2);
      transition: all 0.3s ease;
      
      &:focus {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }
    }
  }
}

// 智能办公标签页样式
.office-tabs {
  .el-tabs__header {
    .el-tabs__nav-wrap {
      &::after {
        background-color: rgba(24, 144, 255, 0.1);
      }
    }
    
    .el-tabs__item {
      color: #595959;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:hover {
        color: #1890ff;
      }
      
      &.is-active {
        color: #1890ff;
        font-weight: 600;
      }
    }
    
    .el-tabs__active-bar {
      background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
      height: 3px;
      border-radius: 2px;
    }
  }
}

// 智能办公分页样式
.office-pagination {
  .el-pagination {
    .el-pager li {
      border-radius: 8px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(24, 144, 255, 0.1);
        color: #1890ff;
      }
      
      &.active {
        background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
      }
    }
    
    .btn-prev, .btn-next {
      border-radius: 8px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(24, 144, 255, 0.1);
        color: #1890ff;
      }
    }
  }
}

// 智能办公下拉菜单样式
.office-dropdown {
  .el-dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(24, 144, 255, 0.1);
    
    .el-dropdown-item {
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(24, 144, 255, 0.08);
        color: #1890ff;
      }
    }
  }
}

// 智能办公消息提示样式
.office-message {
  .el-message {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: none;
    
    &.el-message--success {
      background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(115, 209, 61, 0.1) 100%);
      border-left: 4px solid #52c41a;
    }
    
    &.el-message--warning {
      background: linear-gradient(135deg, rgba(250, 140, 22, 0.1) 0%, rgba(255, 169, 64, 0.1) 100%);
      border-left: 4px solid #fa8c16;
    }
    
    &.el-message--error {
      background: linear-gradient(135deg, rgba(245, 34, 45, 0.1) 0%, rgba(255, 77, 79, 0.1) 100%);
      border-left: 4px solid #f5222d;
    }
    
    &.el-message--info {
      background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 169, 255, 0.1) 100%);
      border-left: 4px solid #1890ff;
    }
  }
}

// 智能办公加载样式
.office-loading {
  .el-loading-mask {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    
    .el-loading-spinner {
      .circular {
        .path {
          stroke: #1890ff;
        }
      }
    }
  }
}

// 智能办公对话框样式
.office-dialog {
  .el-dialog {
    border-radius: 16px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(24, 144, 255, 0.1);
    
    .el-dialog__header {
      background: linear-gradient(135deg, rgba(24, 144, 255, 0.02) 0%, rgba(24, 144, 255, 0.05) 100%);
      border-bottom: 1px solid rgba(24, 144, 255, 0.1);
      border-radius: 16px 16px 0 0;
      padding: 20px 24px;
      
      .el-dialog__title {
        color: #262626;
        font-weight: 600;
      }
    }
    
    .el-dialog__body {
      padding: 24px;
    }
    
    .el-dialog__footer {
      border-top: 1px solid rgba(24, 144, 255, 0.1);
      padding: 20px 24px;
    }
  }
}

// 智能办公工具提示样式
.office-tooltip {
  .el-tooltip__popper {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(24, 144, 255, 0.1);
    background: #ffffff;
    color: #262626;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .office-card {
    border-radius: 12px;
    
    .el-card__header {
      padding: 16px 20px;
    }
    
    .el-card__body {
      padding: 20px;
    }
  }
  
  .office-button {
    &.el-button--primary,
    &.el-button--success,
    &.el-button--warning {
      padding: 10px 20px;
    }
  }
}

// 深色主题支持
.office-theme-dark {
  .office-card {
    background: #1f1f1f;
    border-color: rgba(255, 255, 255, 0.1);
    
    .el-card__header {
      background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%);
      border-bottom-color: rgba(255, 255, 255, 0.1);
      
      .header-title {
        color: #ffffff;
      }
    }
  }
  
  .office-table {
    .el-table {
      background: #1f1f1f;
      color: #ffffff;
      
      .el-table__header {
        background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%);
        
        th {
          color: #ffffff;
          border-bottom-color: rgba(255, 255, 255, 0.1);
        }
      }
      
      .el-table__body {
        tr {
          &:hover {
            background: rgba(24, 144, 255, 0.1);
          }
          
          td {
            border-bottom-color: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }
  }
} 